import menuItms from "../config/MenuConfig";
import { Layout, Menu, theme } from "antd";
import React from "react";

import { useNavigate, Route, Routes } from "react-router-dom";

//路由page
import FilePage from "../pages/FilePage";
import Warehouse from "../pages/Warehouse";
import UserInfo from "../pages/UserInfo";

const { Header, Content, Footer, Sider } = Layout;

const Index = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const navigate = useNavigate();

  const clickItem = (item) => {
    console.log("item", item);
    navigate(item.key);
  };

  return (
    <Layout style={{ height: '100%' }}>
      <Header style={{
        position: 'sticky',
        top: 0,
        zIndex: 1,
        paddingInline: 0,
        width: '100%',
      }}>
        <div className="logo" style={{
          float: 'left',
          width: 120,
          height: 31,
          margin: '16px 24px 16px 0',

        }} />
        <Menu
          mode="horizontal"
          items={menuItms}
          onClick={clickItem}
        />
      </Header>


      <Content style={{ height: '100%' }}>
        <div
          style={{
            padding: 24,
            height: '100%',
            background: colorBgContainer,
          }}
        >
          <Routes>
            <Route path="/" element={<FilePage />} />
            <Route path="/file" element={<FilePage />} />
            <Route path="/warehouse" element={<Warehouse />} />
            <Route path="/my" element={<UserInfo />} />
          </Routes>
        </div>
      </Content>

    </Layout>

  );
};
export default Index;
